import { Descriptions, Card, Col, Row, Tag} from 'antd';
import { connect, history } from 'umi';
import {
  EditFilled
} from '@ant-design/icons';
import React, { useEffect,useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import db from '@/utils/localstorage';
import {HasPermission} from '@/components/AuthComponent/HasPermission';
const AuthEdit = HasPermission(EditFilled);

const LessonDetail = props => {
  const { loading,dispatch,match,lesson} = props;
  const [dictTypeMap, setDictTypeMap] = React.useState('');
  useEffect(() => {
    if (dispatch) {
       dispatch({
        type: 'cubeLesson/fetchLesson',
        payload:{
          id:match.params.id
        }
      })
      let dictTypeList= db.get("dictTypeList")["class_hour_fee_type"]
      let dictTypeMap={}
      dictTypeList.map((item)=>{
        dictTypeMap[item.value]=item.label
      })
      setDictTypeMap(dictTypeMap)
     }
   }, []);


  const goToEdit = () =>{
   history.push(`/lesson/list/update/${lesson.type}/${lesson.id}`);
  } 

  const goDetail = () =>{
    history.push(`/employee/list/detail/${lesson.coachId}`);
  }
  return (
    <PageHeaderWrapper title="课程详情">
       <Card title="课程信息" style={{marginBottom: 24}} extra={<AuthEdit auth={[`lesson:update`]} onClick={goToEdit}/>} bordered={false} loading={loading}>
          <Row>
            <Col xl={16} md={24} xs={24}>
              <Descriptions
                style={{
                  marginBottom: 24,
                }}
              >
                <Descriptions.Item label="课程名称">{lesson.courseName}</Descriptions.Item>
                <Descriptions.Item label="教练"><a onClick={()=>goDetail()}>{lesson.coachName}</a></Descriptions.Item>
                <Descriptions.Item label="类型">
                  {
                   dictTypeMap[lesson.classHourType]
                  }
                </Descriptions.Item>
                <Descriptions.Item label="时长">{lesson.courseDuration}</Descriptions.Item>
                <Descriptions.Item label="最多上课人数">{lesson.maximumAttendance}</Descriptions.Item>
                <Descriptions.Item label="最少上课人数">{lesson.minimumNumberClasses}</Descriptions.Item>
                <Descriptions.Item label="课程备注">{lesson.bz}</Descriptions.Item>
                <Descriptions.Item label="课程介绍">{lesson.courseIntroduction}</Descriptions.Item>
                <Descriptions.Item label="课程标签">
                  {
                    lesson.lableList&&lesson.lableList.map((item,index)=><Tag key={index} color="blue">{item}</Tag>)
                  }
                </Descriptions.Item>
              </Descriptions>
            </Col>
            <Col xl={8} md={24} xs={24}>
                 {
                   lesson.coursePicture?
                   <img src={`http://mmm.supercube.vip/${lesson.coursePicture}`} style={{maxWidth:300,float:'right'}}/>:
                   <img src={` http://mmm.supercube.vip/2020/09/a5df4fad-c9f6-4c8f-ab45-55d0cf3745e5.png`} style={{maxWidth:300,float:'right'}}/>
                  
                 }
            </Col>
          </Row>
       </Card>
    </PageHeaderWrapper>
  );
};

export default connect(({ loading,cubeLesson }) => ({
  loading: loading.effects['cubeVipBindCard/fetchLesson'],
  lesson:cubeLesson.lesson
}))(LessonDetail);
